<template>
<!-- 角色管理 -->
  <div id="role">
      <div class="content">
        <!-- 搜索框 -->
        <div id="role-top">  
        <el-input placeholder="请输入内容" v-model="value" ></el-input>
        <button type="button" class="el-button el-button--primary" @click="list()">
          <i class="el-icon-search"></i><span>查找</span>
        </button>
        <button type="button" class="el-button el-button--primary"  @click="additions()"  v-Promise="'admin:role:create'">
        <div> <i class="el-icon-edit"></i><span>添加</span></div>
        </button>
        </div>
        <!-- 数据操作 -->
      <div id="role-bottom">
         <el-table 
         border
         v-Promise="'admin:role:list'"
         :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" :key="id">
      <el-table-column label="角色名称" prop="desc"></el-table-column>
      <el-table-column label="说明" prop="name"></el-table-column>
      <el-table-column align="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="compile(scope.$index,scope.row)" class="kohlrabiblue"  v-Promise="'admin:role:update'">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)"  v-Promise="'admin:role:delete'">删除</el-button>
          <el-button size="mini" @click="authori(scope.$index, scope.row)" class="kohlrabiblue"  v-Promise="'admin:role:permissionList'">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!-- 分页 -->
    <div id="block">
      <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
      <el-pagination
        :page-sizes="[10, 20, 30, 40, 50,100]"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <div>
          <!-- 添加编辑弹框 -->
      <el-dialog :title="titleName" :visible.sync="dialogFormVisible">
        <el-form :model="form">
           <el-form-item label="说明" :label-width="formLabelWidth">
              <el-input v-model="form.desc" autocomplete="off"></el-input>
            </el-form-item>
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="affirm()"><div>确 定</div></el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 授权弹框 -->
    <div>
         <el-dialog title="授权" :visible.sync="FormVisible">
          <el-tree
          style="width:150px"
            :data="data"
            show-checkbox
            node-key="id"
            :default-checked-keys="select"
            ref="empowerSelect"
            :current-page="currentPage"
            :total="total"
          >
          </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="FormVisible = false">取 消</el-button>
          <el-button type="primary" @click="authorization()"><div>确 定</div></el-button>
        </div>
        <!-- </template> -->
      </el-dialog>
    </div>
    </div>
  </div>
</template>

<script lang="ts">
// api
import role from "@/api/role.js"
// qs可以转型
import qs from "qs";
// Cookie
import cookie from "js-cookie";
export default {
  data() {
    return {
      ider: 0,
      id: '',
      tableData: [],
      search: '',
       dialogTableVisible: false,
       dialogFormVisible: false, //弹窗口
       FormVisible: false, //弹窗口
       titleName:"", //是否添加还是编辑
       modalType:"",  //判断类型类型
       select:[],//选中的权限
       value: '', //查找
        form: {
          name: '',
          region: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        array:'',
        authoriId:"",
        data: [],
        // 
      currentPage: 1,//当前的默认的页数
      eachpage: 10,//默认的页码
      total: 0,//初始值共数据条
      totalPageNo: 1
      // 
    };
  },
  //编辑
  methods: {
    // 页码条
      handleSizeChange(val) {
        this.eachpage=val
        this.list()
      },
      // 页
      handleCurrentChange(val) {
        this.currentPage=val
         this.list()
      },
    //编辑
    compile(index,row){
      this.dialogFormVisible=true
      this.titleName="编辑"
      this.modalType="update"
      this.array = row.id;
      this.ider = index;
      this.form.name=row.name
      this.form.desc=row.desc
    },
    //添加
    additions(){
       this.titleName="添加"
       this.modalType="add"
       this.dialogFormVisible=true
       this.form={}
    },
    // 数据列表
    list() {
        let _this = this;
        role.role(_this.value,_this.currentPage,_this.eachpage).then(function(res) {
          //数据
          _this.tableData = res.data.data.items
          _this.total = res.data.data.count;
          // 分页
          _this.currentPage=res.data.data.pageNo
          _this.eachpage=res.data.data.pageSize
          _this.total=res.data.data.total
          _this.totalPageNo=res.data.data.totalPageNo
        });
    },
    // // 删除
    handleDelete(index){
    var _this = this;
    // 提示框
     this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          _this.$information.error("删除成功")
            let data={
              "roleId": _this.tableData[index].id
            }
            role.handleDelete(data).then(function(res){
              console.log(res)
              _this.tableData.splice(index, 1)
            });
        })
        .catch(() => {
          _this.$information.error("已取消删除")
        });
    },
    // 判断是否添加还是编辑
    affirm(){
      let _this=this
      if (_this.form.name.trim()=="" &&_this.form.desc.trim()=="") {
         _this.$message.error("！角色或说明不能为空");
      }else{
        //添加
      if(_this.titleName === '添加'){   
        role.addition(_this.form).then(function(res) {
          console.log(res)
          if (res.data.errmsg=="成功") {
             _this.tableData.push(res.data.data)
             _this.$information.success("这是一条添加成功的提示消息")
          } else {
        _this.$information.error("这是一条添加失败的提示消息") 
        } 
        });
      } 
        // 编辑
       if(_this.titleName === '编辑'){    
        let data={
          "id":_this.array,
          "name":_this.form.name,
          "desc":_this.form.desc
        }
         role.compile(data).then(function(res) {
         _this.tableData.splice(_this.ider, 1, res.data.data);//splice可以时时更新
         _this.$information.success("这是一条编辑成功的提示消息") 
        });
      }
     }
      this.dialogFormVisible=false
    },
    //授权
    authori(index,row){
        this.authoriId=row.id
          let _this = this;
      let data={
        "roleId":_this.authoriId
      }
        role.authori(data).then(function(res) {
          //数据
           _this.data = res.data.data.systemPermissions
           _this.select=res.data.data.assignedPermissions
        });
      _this.FormVisible=true
    },
    // 修改授权
    authorization(){
        let _this=this
        let data={
           "roleId":_this.authoriId,
           "permissions":_this.$refs.empowerSelect.getCheckedKeys()// 获取选中的权限
        }
        role.authoriAlter(data).then(function(res) {
         console.log(res) 
         _this.$information.success("这是一条修改授权成功的提示消息") 
        });
      this.FormVisible=false
    }
  },
  created(){
    this.list();
  },
   watch:{
    dialogFormVisible(){
      this.$nextTick(() => {
       this.$refs.ruleForm.clearValidate();
      })
    }
  }
};
</script>

<style>
  #role{width:100%;height: 100%;}
  .content{
    width: 80vw;height:80vh;margin: auto;
  }
  .el-table{width: 100vw;
    height:auto;
    border: 1px solid #cccccc;
    margin: auto;
  }
  #role-top{
    width: 50vw;
    display: flex;
    margin-bottom: 30px;
  }
  #role-top .el-input__inner{
    width: 200px;
  }
  .el-input{
    width: 210px;
  }
  /*  */
  #block{
    margin-top: 30px;
  }
  .kohlrabiblue{
    background: #66B1FF;color: #ffffff; 
  }
  /*  */
  .el-table--enable-row-transition/deep/.el-table__body td {
    text-align: center;
    }
.el-table/deep/th.is-sortable {
    cursor: pointer;
    text-align: center;
}
.el-table td, .el-table/deep/th.is-leaf {
    text-align: center;
}
</style>